<template>
    <!-- 我的服务 -->
    <div class="my-service">
        <head-usual to="/" title="我的服务"></head-usual>
        <!-- title -->
        <div class="title">
            <div class="title-left">
                <h2>我的服务项目</h2>
                <p>通过帮助更多的人，为企业培养更优秀的人才，获得更多项目。</p>
            </div>
            <router-link class="title-right" to="/user/resume">
                <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia"></use>
                </svg>
                添加
            </router-link>
        </div>
        <!-- servie-list -->
        <div class="service-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
            <div class="service-item" v-for="(item,index) in PageList" :key="index">
                <div class="service-item-title">
                    <div class="service-item-title-left">{{item.title}}</div>
                    <!-- <div class="service-item-title-right" @click="handleEdit">更多
                        <svg class="icon" aria-hidden="true" >
                            <use xlink:href="#icon-shang-copy-copy"></use>
                        </svg>
                    </div> -->
                </div>
                <div class="service-item-main">
                    <div class="service-item-main-state">
                        <span>审核状态：{{item.status}}</span>
                        <span>服务费用：<i>￥{{item.price}}</i></span>
                    </div>
                    <div class="service-item-main-html">
                        <h2>服务内容：</h2>
                        <p>{{item.info}}</p>
                    </div>
                     <div class="service-item-main-html">
                        <h2>服务时间：</h2>
                        <pre>{{item.remarks}}</pre>
                    </div>
                </div>
            </div>
              <div v-show="loading" class="page-infinite-loading">
                        <mt-spinner type="fading-circle"></mt-spinner>
                        加载中...
        </div>
        <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
        </div>
        <mt-actionsheet
        :actions="actions"
        v-model="sheetVisible" cancelText>
        </mt-actionsheet>
    </div>
</template>

<script>
import { Actionsheet,MessageBox} from 'mint-ui';
import {PageList} from '@/api/service';
export default {
    data(){
        var that=this;
        return{
            arr:[,,],
            sheetVisible:false, //更多按钮弹窗操作
             actions:[
                {
                name:'编辑',
                method() {
                    that.$router.push('/user/service/add')
                }
                },
                {
                name:'删除',
                method(){
               MessageBox.confirm('确定删除此项?').then(action => {

                    });
                }
                },
           ],
           searchCondition:{
               pageindex:1,
               uid:0,
               cmd:'own'
           },
           loading: false, //是否显示加载中
           allLoaded: true, //加载完毕

           PageList:[],
           totalPage:0
        }
    },
    created(){
      this.searchCondition.uid=this.$store.state.userinfo.id; 
      console.log(  this.$store.state.userinfo.id);
      PageList(this.searchCondition).then(res=>{
          if(res.StatusCode==200){
              this.PageList=res.Data;
              this.totalPage=res.TotalPage;
          }
      });
    },
   
    methods:{
        handleEdit(){
            this.sheetVisible=!this.sheetVisible;
        },
     loadMore() {
      //分页加载更多
      if (this.searchCondition.pageindex >= this.totalPage) {
        this.allLoaded = true;
        return;
      }
      this.loading = true;
      setTimeout(() => {
        this.searchCondition.pageindex++;
        GetPageList(this.searchCondition).then(res => {
          if (res.StatusCode === 200) {
            this.PageList = this.PageList.concat(res.Data);
          }
        });
        this.loading = false;
      }, 1000);
    },
    //购买服务
   
    },
};
</script>

<style lang="scss" scoped>
.my-service {
  .title {
    border-bottom: 10px solid #f4f4f4;
    display: flex;
    justify-content: space-between;
    padding: 8px 12px 13px 12px;
    align-items: center;
    .title-left {
        width: 275px;
      h2 {
        font-size: 14px;
        color: #666;
      }
      p {
        font-size: 12px;
        color: #999;
      }
    }
    .title-right {
     padding: 2px 6px;
      border-radius: 11.5px;
      background: #3887fe;
      color: #fff;
      display: flex;
      align-items: center;
      .icon {
        font-size: 16px;
       
      }
    }
  }
  .service-list{
      .service-item{
          padding: 0 12px;
          border-bottom: 5px solid #f4f4f4;
          &-title{
              height: 54px;
              line-height: 54px;
              
              display: flex;
              justify-content: space-between;
              border-bottom: 1px solid #eee;
              &-left{
                  font-size: 14px;
                  color:#3887fe;
              }
              &-right{
                  font-size: 12px;
                  color:#3887fe;
                  display: flex;
                  align-items: center;
                  .icon{
                      margin-left: 2px;
                  }
              }
          }
          &-main{
              padding: 10px 0 12px 0;
              pre{
                 overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
              }
              &-state{
                  font-size: 14px;
                  color: #666;
                  span{
                      margin-right: 16px;
                      i{
                          color:#ff0000;
                          font-style: normal;
                      }
                  }
              }
               &-html{
                   margin-top:5px;     
              h2{
                  font-size: 14px;
                  color:#666;
              }
              p{
                  font-size: 14px;
                  color:#999;
                  overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
          }
          }
         

      }
  }
}
</style>
